import { useState } from "react";

function News(){

     const [news,setNews] = useState([{id:1,title:"北京欢迎您！"},{id:2,title:"上海欢迎您！"},{id:3,title:"广州欢迎您！"}]);

     const del=(index)=>{

        //  let newNews = [...news];
        //  newNews.splice(index,1);
        //  setNews(newNews);
        setNews(news.filter((_,ind)=>ind!==index))

     }
     const add=()=>{

        // let newNews = [...news];
        // newNews.push({id:news.length+1,title:"深圳欢迎您！"});
        // setNews(newNews);

         setNews([...news,{id:news.length+1,title:"深圳欢迎您！"}]);
        
     }

     const edit=(idx)=>{
    
        // let newNews =[...news];
        // newNews[index].title="hello,"+newNews[index].title;
        // setNews(newNews)

        setNews(news.map((item,index)=>({...item,title:index===idx?"hello,"+item.title:item.title})))

     }

     const addHandle=(e,id)=>{

        console.log("e",e);
        console.log("id",id);

        //阻止默认事件
        e.preventDefault();

     }

     const editHandle=(e,id)=>{
 
        console.log("id",id);
        console.log("e",e);

     }

    
    return (
        <div>

            {/* <button onClick={(e)=>addHandle(e,10000)}>事件</button> */}

            <a href="http://baidu.com" onClick={(e)=>addHandle(e,10000)}>事件</a>

            <button onClick={editHandle.bind(this,20000)}>事件1</button>

            <button onDoubleClick={(e)=>editHandle(e,10000)}>双击事件</button>


            <h1>News</h1>
            <button onClick={()=>add()}>添加</button>
            <ul>
                {
                  news.map((item,index)=>(

                              <li key={item.id}>{index}{item.title} 
                              <button onClick={()=>edit(index)}>修改</button>
                              <button onClick={()=>del(index)}>删除</button>
                              </li>
                  ))
                }
                
            </ul>
        </div>
    )

}
export default News;